<template>
  <div class="app-box">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>所有用户</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 数据 -->
    <el-table :data="user"
              class="el-table-box"
              style="width: 100%; margin-top:20px;font-weight:700"
              :header-cell-style="{textAlign: 'center'}"
              :cell-style="{ textAlign: 'center' }"

              max-height="80%">
      <!--      <el-table-column label="头像" width="80"><el-image :src="'http:\\localhost:8080'+user.userPic"></el-image></el-table-column>-->
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="userName" label="姓名" width="100"></el-table-column>
      <el-table-column prop="dept.deptName" label="部门" width="150"></el-table-column>
      <el-table-column prop="account" label="账号" width="250"></el-table-column>
      <el-table-column prop="gender" label="性别" width="80"></el-table-column>
      <el-table-column prop="userMail" label="邮箱" width="180"></el-table-column>
      <el-table-column prop="userTel" label="联系电话" width="250"></el-table-column>
      <el-table-column prop="salary" label="薪资" width="250"></el-table-column>
      <el-table-column prop="entryDate" label="入职时间" width="250"></el-table-column>
      <el-table-column prop="leaveDate" label="离职时间" width="250"></el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <!--        <template slot-scope="scope">-->
        <!--          <el-button @click="" size="small" style="font-size:15px">查看-->
        <!--          </el-button>-->
        <!--        </template>-->
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="download">导出为excel</el-button>
    <el-button type="text" @click="dialogFormVisible = true">筛选</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="queryUser">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="queryUser.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最低薪资" :label-width="formLabelWidth">
          <el-input v-model="queryUser.minSalary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最高薪资" :label-width="formLabelWidth">
          <el-input v-model="queryUser.maxSalary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="queryUser.gender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="queryUser.userTel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="queryUser.userMail" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="入职时间" :label-width="formLabelWidth">
          <div class="block">
            <span class="demonstration">默认</span>
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="conditionalQuery">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: [],
      processVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "200px",
      value1: [],
      active: 0,
      rejectReason: '',
      finshState: '',
      p: "",
      pageSize: "",
      totalPages: "",

      queryUser: {
        userId: "",
        account: "",
        userName: "",
        gender: "",
        userMail: "",
        userTel: "",
        entryDate: "",
        salary: "",
        userStatus: "",
        leaveDate: "",
        startTime: "",
        endTime: "",
        maxSalary: "",
        minSalary: ""
      }
    }
  },
  created() {
    this.getLeaveData();
  },
  methods: {
    //获取数据
    getLeaveData() {
      var userInfo = JSON.parse(window.sessionStorage.getItem("user"));
      var userId = (JSON.parse(userInfo).userId);
      var queryUser = this.queryUser
      this.$http.post("/user/list", queryUser).then((res) => {
        console.log(res);
        console.log(res.code)
        if (res.code == 200) {
          this.user = res.data;
        } else {
          this.$message.error("获取数据失败!!!");
        }
      }).catch((err) => {
        console.log(err)
        this.$message.error("获取数据失败!!!");
      });
    },
    download() {
      var queryUser = this.queryUser
      this.$http.post("user/download", queryUser, {
        responseType: "arraybuffer"
      }).then(res => {

        console.log(res)
        var blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
        var objectUrl = URL.createObjectURL(blob);
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        a.href = objectUrl;
        a.download = '员工表';
        a.click();
        document.body.removeChild(a);
      })
    },
    conditionalQuery(){
      if (this.value1.length>0) {
        this.queryUser.startTime = this.value1[0]
        if (this.value1.length>1) {
          this.queryUser.endTime = this.value1[1]
        }
      }
      this.$http.post("user/list",this.queryUser).then(e=>{
        if (e.code==200){
          this.user=e.data
          this.dialogFormVisible=false
        }else {
          alert("查询失败，请重新指定条件")
        }
      })

    }
  }
}
</script>

<style scoped>
.el-table >>> .error-row {
  background: #E6A23C;
}

.el-table >>> .success-row {
  background: #61e861;
}

.m-1 {
  width: 15px;
  height: 15px;
  border: 1px solid rgb(230, 162, 60);
  display: inline-block;
  margin-top: 20px;
  margin-left: 35%;
  background-color: rgb(230, 162, 60);
}

.m-2 {
  width: 15px;
  height: 15px;
  border: 1px solid rgb(97, 232, 97);
  display: inline-block;
  margin-top: 20px;
  margin-left: 5%;
  background-color: rgb(97, 232, 97);
}

.m-3 {
  width: 15px;
  height: 15px;
  border: 1px solid black;
  display: inline-block;
  margin-top: 20px;
  margin-left: 5%;
  background-color: rgb(255, 255, 255);
}
</style>
